<template>
  <div class="loginbox">
    <!-- 背景 -->
    <img src="@/images/loginbj.png" alt="" class="loginbj" />
    <!-- logo -->
    <img src="@/images/loginicon.png" alt="" class="loginicon" />
    <!-- 标题 -->
    <img src="@/images/logintitle.png" alt="" class="logintitle" />
    <div class="ment3 tool" @click.stop="closeFn">
      <!-- 背景 -->
      <img src="@/images/anbj.png" alt="" class="anbj" />
      <img src="@/images/men3icon.png" alt="" class="normal" />
      <img src="@/images/men3iconac.png" alt="" class="active" />
    </div>
    <!-- 人头 -->
    <img src="@/images/loginre.png" alt="" class="loginren" />
    <!-- 开始实验 -->
    <div class="startbox tool" @click="start">
      <img src="@/images/loginstartbj.png" alt="" class="startboximg normal" />
      <img
        src="@/images/loginstartbjac.png"
        alt=""
        class="startboximg active"
      />
      <img src="@/images/starttext.png" alt="" class="starttextimg normal" />
      <img src="@/images/starttextac.png" alt="" class="starttextimg active" />
    </div>
    <!-- 右上角语音控制模块 -->
    <HeadMain :leftshow="leftshow" />
  </div>
</template>

<script>
  import HeadMain from '@/components/headMain.vue';

  export default {
    name: 'WorkspaceJsonLoaDing',
    components: {
      HeadMain,
    },
    data() {
      return {
        leftshow: false,
      };
    },

    mounted() {},

    methods: {
      start() {
        this.$router.push({
          name: 'home',
        });
      },
      closeFn() {
        if (
          navigator.userAgent.indexOf('Firefox') != -1 ||
          navigator.userAgent.indexOf('Chrome') != -1
        ) {
          window.location.href = 'about:blank';
          window.close();
        } else {
          window.opener = null;
          window.open('', '_self');
          window.close();
        }
      },
    },
  };
</script>

<style scoped>
  .loginbox {
    width: 100%;
    height: 100%;
    position: absolute;
  }
  .loginbj {
    width: 100%;
    height: 100%;
    position: relative;
  }
  .loginicon {
    width: 253px;
    height: 83px;
    position: absolute;
    left: 47px;
    top: 44px;
    z-index: 99;
  }
  .logintitle {
    width: 1016px;
    height: 234px;
    position: absolute;
    left: 66px;
    top: 220px;
  }
  .ment3 {
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 10px;
  }
  .ment3 img {
    width: 30px;
    height: 30px;
    position: absolute;
  }
  .anbj {
    width: 60px !important;
    height: 60px !important;
    position: relative !important;
  }
  .loginren {
    width: 440px;
    height: 630px;
    position: absolute;
    top: 220px;
    right: 278px;
  }
  .startbox {
    position: absolute;
    left: 420px;
    bottom: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .startboximg {
    width: 200px;
    height: 82px;
  }
  .starttextimg {
    width: 127px;
    height: 27px;
    position: absolute;
    top: 24px;
  }
</style>
